[UX] Thought2011/09/27 12:07


앞으로 '클라우드 알아보기' 라는 제목의 시리즈를 연재할 예정입니다. 
클라우드는 최근 IT 업계에서 화두가 되고있는 분야입니다. 클라우드 관련 도서 리뷰와 퍼스널 클라우드 관련 서비스를 간략하게 살펴보려고 합니다. 

살펴볼 내용은 아래와 같습니다.

1. 클라우드 도서 리뷰(1) - 클라우드
2. 클라우드 도서 리뷰(2) - 클라우드 컴퓨팅
3. 퍼스널 클라우드 관련 서비스



'클라우드'라는 제목의 책을 읽었습니다. 
야코 도모노리 지음, 김정환 옮김, 도안구 감수

본 책은 클라우드의 기본 개념을 설명하는 책입니다. 또한 클라우드를 뒷받침 하는 기술에 대해서 논하고 있으며, 클라우드가 기업 및 개인의 측면에서 어떤 가치를 지니는지에 대해서 논하고 있습니다. 클라우드에 대해서 개념이 잘 이해가 되지 않으시면 가볍게 읽을 수 있는 분량과 내용을 제공하고 있습니다. 다만 클라우드에 대해서 깊게 이해하고 싶으시다면 다른 책을 읽어보시길 권합니다. 또한 기획자의 입장에서 볼 때 기획적인 인사이트보다는 개발에 관한 이해를 돕는 내용이 많아 다소 이해가 되지 않는 부분이 있었습니다.

인상깊은 구절들을 공유합니다.


p.19-20

클라우드의 정의와 기원에 대해서 다루고 있습니다.
클라우드는 인터넷을 가리킨다. 
클라우드 컴퓨팅의 클라우드를 말할 때 대전제가 되는 건 인터넷의 존재다. 개개인의 단말기에서는 인터넷 저편에 네트워크로 연결된 컴퓨터가 몇 대 있는지, 그리고 그것들이 구체척으로 어떤 상태인지 잘 알 수 없다. 그래서 IT업계의 사람들은 처음부터 인터넷 자체를 '구름'같은 존재로 표현했다.
클라우드 컴퓨팅 이라는 말은 구글의 CEO인 에릭슈미트가 2006년에 강연에서 처음 사용했다고 하는데, 그 역시 위와 같이 자연스러운 발상에서 그렇게 말했을것이 틀림없다.

p.20
클라우드를 뒷받침하는 기술에 대해서 다루고 있습니다.

1. SaaS (software as a service)
 
- 소프트웨어 서비스, 구글의 G메일이나 구글 문서도구, 구글 스프레드 시트

2. PaaS (platform as a service)
 - 플랫폼 서비스, 애플리케이션의 개발환경이나 소프트웨어를 위한 기본적인 모듈을 뜻함

3. Iaas (infrastructure as a service)
- 인프라 서비스, 서버나 데이터베이스등의 하드웨어를 뜻함


p.52
'어떻게하면 컴퓨터를 잘 사용할 것인가'에서 '컴퓨터를 이용해 무엇을 하고싶은가'에 대한 물음입니다. 앞으로 클라우드를 통해 무엇을 하고 싶은가요?

컴퓨터를 이용해 '무엇을 하고싶은가'로 관점이 바뀐다. 어떤 단말기를 사용하느냐는 문제가 아니다.


p.82 
'세일즈포스 닷컴'의 클라우드 전략에 대한 부분입니다. 기업 내 채팅 어플리케이션에 대해 다루고 있습니다. 애플리케이션이 짹짹거리는 것이 특징이라는데 재밌네요.
트위터에서 힌트를 얻어 개발했다는 기업 내 채팅 애플리케이션 채터(Cahtter)가 2010년 6월에 공식 출시됐다.

간단한 설정으로 애플리케이션과도 연계시킬 수 있는 이 클라우드 서비스는 애플리케이션이 짹짹거리는(경고나 메시지를 보내는) 것이 특징으로, 기업 내의 커뮤니케이션 환경을 변화시킬지도 모르는 가능성을 내포하고 있다.


p.102 
개인 시장을 위한 퍼스널 클라우드 서비스에 대한 내용입니다. 다소 생소한 PCC에 대해서 새롭게 알게 되었습니다.
개인시장의 경우에는 N 스크린 전략을 구체화하기 위한 방안으로 클라우드 서비스들이 등장하고 있다. 이런 흐름을 퍼스널 클라우드 서비스(PCC)라고 명명하고 있다.

PCC는 수많은 디바이스들을 보유한 이용자가 언제 어디서나 자신이 사용하던 사진, 동영상, 주소록, 오피스 문서, 게임, 메일 등의 콘텐츠들을 최신의 상태에 접근해 사용할 수 있도록 해는 서비스다.


p.162
클라우드는 어떤 변화를 일으킬 수 있을까요? 어떤 단말기에서나 클라우드에 접속할 수 있습니다. 이 책에서는 클라우드 단말기가 생겨날 수 있다고 예견하고 있습니다. 또한 클라우드를 통해 공동작업(crowdsourcing)을 할 수 있다고 이야기 합니다. (현재 국내 퍼스널 클라우드 서비스에서는 '다음 클라우드'가 유일하게 공동작업을 위한 공유컨셉을 제공하고 있습니다.)

클라우드가 일으키는 변화
- 컴퓨터가 변화한다.
- IT 비즈니스가 변화한다
- 기업경영이 변화한다
- 업무방식이 변화한다
- 사회 인프라가 변화한다
- 지식과 인류가 변화한다
- 클라우드 자체가 변화한다.


그 외의 궁금한 내용들은 해당 도서를 읽어보시길 권합니다.
감사합니다.

저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

[UX] Thought2011/09/06 09:00

글을 시작하며...
최근 회사 동료로부터 안드로이드 위젯 프로젝트 관련 노하우 공유 요청을 받았습니다. 경험을 공유하다 보니, 이와 관련해서 생각을 정리해보고 싶은 마음이 들었습니다.

본 블로깅을 통해 안드로이드 위젯 관련 프로젝트를 시작하시는 신입 분들이나, 실무경험이 상대적으로 적은 학생분들에게 도움이 되었으면 좋겠습니다. (저보다 많은 경험이 있으신 분들은 의견을 보태주시면 저같은 UI 기획자가 배울 수 있는 밑거름이 될 것 같습니다.) 또한 다음 고려사항들은 순수히 제 의견이며 논란의 여지가 충분히 있으므로 이점도 감안해 주시고 봐주세요.

[그림1] 추억의 햅틱 위젯

 
[그림2] 안드로이드 위젯 
 
위젯은 무엇인가?

웹 전문가인 '힌치클리프' 는 위젯을 웹에서 실행되는 작은 어플리케이션이라고 정의하였습니다. 위젯의 사전적 의미는 실용적인 목적으로 사용되는 작은 기계 또는 장치를 말하는 것으로, 주로 새롭게 만들어졌거나 신기한 장치, 또는 이름을 알 수 없거나 생각나지 않는 소형 장치, 부품, 도구를 일컫는 단어로 사용되고 있습니다. 또한 위젯의 동의어로 자주 사용되는 단어로 가젯이 있는데요. 위젯과 가젯의 어원이 정확히 알려진 바는 없지만 웹스터 사전에 등록된 시기를 볼 때 오래 전부터 사용된 단어인 것으로 추정됩니다. 또한 위젯을 뱃지(badge), 모듈(module), 버튼(button) 등으로 부르기도 합니다. (출처 하단 명기함) (아이폰같은 경우 위젯과 어플리케이션의 경계가 모호하기는 합니다. 이 점은 논란의 여지가 있으나 본 블로깅에서는 다루지 않습니다.) 

본 블로깅에서는 안드로이드 위젯 기획시 고려사항에 대해서 다룹니다.


안드로이드 위젯 기획시 고려사항

1. 위젯의 핵심 고려사항은 유용성과 크기다.
다양한 위젯 사이즈중에서 어떤 사이즈를 선택하는 것이 좋을까요? 저는 유용성과 크기를 고려해서 설계해야 한다고 생각합니다. 위젯을 설치할 확률은 유용성에 비례하고 크기에 반비례하지 않을까 생각합니다. 같은 유용성을 갖는다면 가능하면 작게 만드는 것이 좋겠고요, 그렇다고 해서 고유의 유용성을 해치면서까지 작게 만들다가는 실패할 여지가 있습니다.  (위젯 크기와 위젯의 유용성에 따른 위젯 등록의 상관관계에 대해서 조사해보고 싶은 생각은 드네요.) 

[그림3] 안드로이드 portrait size

[그림4] 안드로이드 landscape size


2. 터치 영역을 고려해야 한다.
위젯은 그 크기가 어플리케이션에 비해 상대적으로 작으므로 터치 영역을 잘 고려해서 설계해야 합니다.
애플 Human interface guideline을 보면 최소 터치 영역이 44px임을 확인할 수 있습니다. 윈도우폰 UI 가이드라인을 보면 터치 영역을 9mm(34px) ~ 7mm(26px) 사이로 권장하고 있습니다.

현재 안드로이드 위젯 가이드라인에는 최소 터치 영역에 대한 가이드라인이 없으므로, 아쉬운대로 애플 HIG나 윈도우폰 UI 가이드라인을 참조해야 겠습니다.

[그림5] Touch target size


3. 기왕이면 기능은 단순한게 좋다.
위젯은 어플리케이션이 아닙니다. 기왕이면 단순한게 좋습니다. 위젯을 어플리케이션처럼 생각해서 기능에 집중하기 보다는 Short cut의 개념으로 생각하는 게 좋습니다. 또한 위젯은 스크롤이나 트랜지션이 원활하지 않으므로 이 점을 충분히 감안해서 설계하여야 합니다. 요즘들어 안드로이드 사양이 점점 좋아지고는 있다고 하나, 아직까지는 위젯의 기능을 무겁게 가져가기에는 부담이 좀 있는 상황입니다.


4. 기타 고려사항은 없는지 살펴보아야 한다.
- 어떤 안드로이드 단말의 경우 위젯모드를 세로모드 뿐만 아니라 가로모드도 지원하기 때문에 가로모드에 따른 위젯을 추가적으로 개발해야 할 수 있습니다.

- 위젯 크기에 따라 종류별로 추가 셋트를 구성할 수 있습니다. 예를들면 작은 위젯, 중간 위젯, 큰 위젯의 3가지 세트를 만들어놓고 사용자에게 선택하게 하는 것이죠. 하지만 너무 많은 종류의 위젯을 지원하다보면 사용자 입장에서는 선택을 하는데 있어서 혼란을 가중시킬 우려도 있습니다. 선택해보기 전까지는 크기 외에 어떠한 정보도 알수 없으니까 말이죠.

[그림6] 안드로이드 위젯 선택 UI

- 또한 위젯 정보 동기화 이슈가 있습니다. 위젯의 정보를 몇시간마다 가져와서 보여질 것인지에 대한 고민이 필요합니다. 당연히 수시로 정보를 업데이트 하는것이 좋지만, 성능의 문제가 있으므로 수동 업데이트 버튼을 추가로 제공해야 할지를 고려해봐야 합니다.

- 음악 위젯의 경우 락스크린 UI도 고려해야 합니다. 락스크린 UI는 단말이 락이 걸려있더라도 사용할 수 있는 UI인데요, 음악의 경우 멀티태스킹이 가능하기 때문에 락 스크린 UI를 추가로 구성할수도 있습니다.

[그림7] 안드로이드 윈앰프 락스크린(우측)



글을 마치며...
적고보니 다소 일반적인 이야기가 된 것 같습니다. 하지만 기본에 충실한다면 위젯을 기획하는데도 도움이 되지 않을까 생각합니다. 때로는 정공법도 도움이 될때가 있습니다.

현재 안드로이드 위젯 가이드라인이 존재하기는 하지만, 가이드라인이 실제 기획과 디자인을 하는데 있어서 모든 부분을 커버해주지는 않습니다. 그렇기 때문에 어느 부분에 한해서는 새롭게 적용해야 하는 부분이 있을것으로 생각합니다.

또한 안드로이드 3.0(허니콤) 위젯을 제작할 때에는 퍼포먼스의 향상으로 인해 위젯 3D UI를 시도해 볼 여지가 있습니다. (본 포스팅에서는 안드로이드 3.0 위젯에 대한 문제는 논외로 합니다.)

감사합니다. 



참고자료

노주환, 웹 패러다임을 바꾸는 위젯, 멘토르, 2008

루크 로블르스키의 터치 영역 사이즈
http://www.lukew.com/ff/entry.asp?1085

위젯의 역사와 종류
http://1370.me/694

안드로이드 위젯 가이드라인
http://developer.android.com/guide/practices/ui_guidelines/widget_design.html





저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

  1. shawn

    현재 위젯 하나 만들어보려고 하는데, 참고하겠습니다. 감사합니다.

    2011/10/27 16:25 [ ADDR : EDIT/ DEL : REPLY ]
    • 도움이 되었는지 모르겠네요. 들러주셔서 감사합니다.~

      2011/11/01 01:58 [ ADDR : EDIT/ DEL ]
  2. shin

    안녕하세요~ 오빠 ㅋ 신혜정이에요 ㅋㅋ
    종종 놀러와서 열심히 보고있어요ㅋ 여전히 블로그 멋지게 잘 가꾸?시는듯 ^^
    저도 위젯땜에 애먹은 기억이있어서 남겨요 ~ㅋ
    안드로이드 탭 디바이스 버전 가이드가 없던터라 시행착오를 좀 겪었었죠ㅠ
    가이드 막 분석하고 ㅎㅎ
    좋은정보 많은거같아요~ 오늘도 잘 보고 가요~^-^

    2011/10/31 15:40 [ ADDR : EDIT/ DEL : REPLY ]
    • 오랫만이네~ 회사는 어디 다니고 있는거야?
      잘 지내고 있나 모르겠네~
      직장 열심히 다니고 화이팅하길!

      2011/11/01 02:05 [ ADDR : EDIT/ DEL ]

[UX] Thought2011/08/02 01:25

글을 시작하며...
저는 요즘 거의 프로젝트 룸에서 생활을 하고 있습니다. 이번 블로깅에서는 프로젝트 룸 생활을 하면서 느꼈던 본인과 팀원들의 경험. 그리고 (프로젝트 룸을 쓰고있는 사람들의 약식 인터뷰를 통해 얻은) 프로젝트 룸을 구성하는데 있어서 필요한 요소 및 프로젝트 룸의 장점과 단점을 공유하려고 합니다.

[IDEO의 프로젝트 룸]
이미지 출처 : http://userexperience.tistory.com/92


[PXD의 프로젝트 룸]


프로젝트 룸 꾸미기
 

1. 프로젝트 룸
- 프로젝트 룸을 꾸미기 위해서는 일단 사내에 프로젝트 룸이 구비되어 있어야 합니다. 프로젝트 룸도 하루종일 그곳에서 생활할 수 있는 공간이면 더더욱 좋습니다. 사내에 프로젝트 룸을 구비할 수 있는 환경이 아니라면, 구역을 나누어 좀 더 의사소통을 원활히 할 수 있게 하는 방법도 시도해 볼 수 있습니다.

2. 칠판, 벽, 프로젝터, PC(혹은 노트북), 모니터
- 프로젝트 룸을 구성하는데 있어서 칠판은 필수요소입니다. 의사소통이 잘 되지 않을 경우 칠판을 활용해서 설명하면 좀 더 설명이 명확해 질 수 있습니다.
- 벽을 활용하여 시안이나 작업물들을 붙여놓고 확인할 수 있습니다. 본 프로젝트에서는 벽을 충분히 활용하지는 않았습니다만, 다른 프로젝트에는 벽을 활용할 일이 많을것 같습니다. IDEO처럼 벽에 포스트잇 전지를 붙여서 활용하는 방법도 있으며, 보드판을 이용하여 벽면을 대체하는 방법도 있습니다.
- 프로젝터 또한 필요한 요소중 하나입니다. 프로젝터를 통해 문서를 리뷰하고 공유를 쉽게 할 수 있습니다.

3. 일정표, To-do list, 공지사항
- 일정표는 프로젝트의 현 상황을 파악하고 일정대비 얼마나 진행이 잘 되었는지 확인하는데 용이합니다. 그동안 프로젝트를 하면서 일정표를 엑셀에도 관리를 해보고, 구글 Docs로도 관리를 해봤습니다. 그러나 이번에는 일정을 칠판에 적어서 관리했습니다. 칠판에 일정을 적어놓고 관리해 보니 현재 일정을 파악하고 수시로 확인하는데 용이하더군요. 일정에는 문서 릴리즈 일정 및 팀원의 휴가들을 적어놓았습니다.

- To-do list는 오늘 어떤 일들을 수행해야 하는지를 나타내줍니다. 이것 또한 문서화하지 않고, 칠판에 적었습니다. 칠판에 적어놓으니 오늘 어떤 일을 해야하는지 분명히 알 수 있었습니다.

- 공지사항은 수시로 확인해야 할 사항을 적었습니다. 이전에 문서의 번호를 매길 때 문서 번호에 대한 Rule을 칠판에 적어놓고 수시로 확인하면서 작업을 했더니 작업이 수월했습니다.

4. 스피커
- 스피커는 다소 조용한 프로젝트 룸에 활기를 불어넣어 줍니다. 문서 작업을 할때 음악을 들으면서 하면 좀 더 편안한 분위기에서 작업을 할 수 있습니다.


프로젝트 룸의 장점
 

1. 팀원간의 커뮤니케이션에 용이하다. 
- 같은 공간에 있지 않을때는 의사소통할 것들을 정리하고 따로 모여서 회의를 해야합니다. 하지만 프로젝트 룸에 있다보면 그럴 필요가 없습니다. 또한 팀원이 현재 어떤 작업을 하고 있는지 알고 있기 때문에 어떤 것들이 필요한지, 어떤 작업이 진행중인지 파악하기가 용이합니다. 또한 회의를 위해서는 회의 시간도 정해야되는데 프로젝트 룸에서는 그럴 필요가 없습니다. 바로 프로젝터를 켜면 됩니다.

2. 팀원간의 정이 돈독해진다.
- 아무래도 같은 공간에 오랫동안 있다보면 자연스럽게 친해집니다. 친해지면 그만큼 협업을 하는데 있어서 장점으로 발휘됩니다.

3. 프로젝트에 집중을 하는데 용이하다.
- 사내에 있다보면 사내의 다양한 활동과 변수에 노출이 됩니다. 하지만 프로젝트 룸에 있다보면 그런 상황에 노출이 적습니다. 그만큼 업무에 집중할 수 있습니다. 또한 심리적으로 안정이 되기도 합니다.


프로젝트 룸의 단점
 

1. 팀원들끼리 너무 친해져서 대화를 많이 하게 된다. 
- 장기간 프로젝트를 하다보면 프로젝트원들끼리 친해지게 됩니다. 친해지게 되면 대화가 많아지게 되지요. 그만큼 시간을 쓰다보면, 퇴근 시간이 늦어지게 되는 원인이 되기도 합니다.

2. 사생활이 없다.
- 친한 팀원들끼리라면 같은 공간에 계속 붙어있어도 큰 상관은 없겠지만, 불편한 팀원과 같은 공간을 쓴다는 것은 불행한 일이겠습니다. 또한 가끔은 자기 시간이 필요할 때도 있는데, 사생활이 노출된다는 단점은 분명 있습니다. (반면 회사 내에 있으면 작업하면서 눈치를 보게 되는데, 프로젝트룸에서는 눈치를 덜 보게되는 경우도 있습니다.)

3. 같은 회사 사람들과의 교류가 상대적으로 적어진다.
 
- 항상 프로젝트 룸에 있다보면, 반대로 사내 사람들과의 교류가 적어지게 됩니다. 회사에 무슨 일이있는지 모르는 경우가 생기게 됩니다. 프로젝트 룸을 쓰지 않는 사람들과의 커뮤니케이션이 단절되는 경우도 종종 있습니다.

4. 한정된 프로젝트 룸을 점유할 경우 문제가 발생한다.
- 어느 회사나 프로젝트 룸은 한정되어 있습니다. 프로젝트 룸의 수보다 진행되고 있는 프로젝트의 수가 많을 경우 문제가 발생합니다. 이럴때는 각 프로젝트의 팀원들끼리 협의하여 모두가 공평하게 프로젝트 룸을 사용할 수 있도록 조율이 되어야 하겠습니다.


글을 마치며...
 

요즘에는 프로젝트 룸을 쓰다보니 제 자리에 앉을 시간이 없습니다. 그만큼 프로젝트 룸에서 주로 생활을 하고 있습니다. 프로젝트룸에 대해서 현재로서는 만족하고 있습니다. 그러나 사내에서는 처음 시도해본 방식이기 때문에 아직 부족한 점이 많다고 생각합니다. 다음 프로젝트부터는 부족한 점을 개선해서 프로젝트 룸을 적극적으로 활용해보아야 겠다고 생각했습니다. 
프로젝트 룸을 사내에서 이미 잘 활용하고 있는 회사도 있을 것입니다. 그동안 프로젝트 룸을 잘 활용하고 있지 않았다면 이번 프로젝트 부터는 프로젝트 룸을 활용해 보시는것도 좋을것 같습니다. 물론 프로젝트 룸의 단점도 있지만 단점을 커버할만큼의 장점이 있기 때문에 자신있게 추천합니다.

감사합니다.


참고 웹사이트.

능률을 올리는 프로젝트 룸

the innovation process : the project room
http://www.theinnovationprocess.com/2010/12/the-innovation-process-orderliness-in-innovation/ 


저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

[UX] Thought2011/05/25 18:01



최근, 미투데이의 miriya 님이 올려주신 UX movement 링크를 보게 되었습니다.
http://uxmovement.com/forms/innovative-techniques-to-simplify-sign-ups-and-logins 



웹사이트의 회원가입과 로그인을 어떻게 하면 쉽게 할 수 있을지에 대한 몇가지 테크닉에 관한 글입니다.
그 중에도 인상깊었던 부분은 '웹사이트 로그인을 할때 어떤 정보를 통해서 로그인을 하게 할 것인가?' 였습니다.

로그인 방식은 다음과 같이 몇가지 유형이 있습니다.

1. ID + Password 로 로그인 하는 방법
국내 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에는 사용자가 ID를 기억해야 한다는 부담감이 있습니다. 
ID 입력 방식도 사이트에 따라 천차만별이기 때문에 한 사람이 여러개의 ID를 가질 수 있습니다.(첫 글자가 숫자면 안된다는 규칙, 6자리에서 12자리 사이로 입력해야 한다는 규칙같은것들 때문이죠.) 저의 경우 4~5개의 ID와 마찬가지로 4~5 개의 Password가 있어서 상황에 따라 조합해서 가입하는 경우가 있습니다. 
또한 회원 가입시에는 별도로 E-mail 정보를 입력해야 한다는 부담이 있습니다.(E-mail 정보를 ID, Password 확인 용도나, 이벤트 알림 용도로 사용할 수 있죠.) 

미투데이의 로그인 방식


2. E-mail + Password 로 로그인 하는 방법
외국 웹사이트에서는 거의 이 방식을 사용하고 있습니다.
이 경우에도 마찬가지로 사용자가 E-mail을 기억해야 한다는 부담감이 있습니다. 
또한 상대적으로 ID보다는 긴 형태이기 때문에 입력하는데 시간이 걸리며, 인지하는데도 어느정도의 어려움이 있습니다. E-mail을 몇 개나 사용하고 있는지도 마찬가지로 천차만별입니다. 저의 경우를 비추어보자면 E-mail을 4~5개 정도 보유하고 있어서 이 경우에도 어떤 E-mail로 가입했는지 고민을 해야 합니다. 그렇지만 E-mail을 한 개만 사용하는 경우에는 크게 문제는 없을것 같습니다.  

또한 웹사이트에서는 E-mal 입력이 편한 반면, 모바일에서는 E-mail 주소 입력이 상대적으로 불편합니다. 이런 여러가지 생각들속에서 올바른 가치판단을 해야겠습니다.

페이스북의 로그인 방식



그렇다면 회원 가입 시 E-mail 인증 및 E-mail 중복 체크를 해야될까요?
E-mail 중복 체크는 꼭 해야 할것으로 보입니다. 하나의 E-mail로 두 명이 사용할 수는 없기 때문입니다. E-mail 인증 절차도 복잡하지않게 설계한다는 전제하에서 필요할 것으로 보입니다. '인증을 해서 사용자를 불편하게 할 것인가?' vs '인증을 하지 않아 입력단계를 편하게 하지만, 이메일을 잘못 입력했을 경우에는 사용자의 책임으로 전가할 것인가?' 를 사이에 두고 가치판단을 하여야겠습니다.

3. E-mail or ID + Password 로 로그인 하는 방법
E-mail 혹은 ID 둘 중 하나만 입력해도 로그인 하는 방법입니다. 이 경우 E-mail 과 ID 둘다 입력되어있다는 전제하에서 로그인이 성립 될 것 같습니다. E-mail 통해 가입하는걸 원하는 사람 혹은 ID를 통해 가입하는걸 원하는 사람이 있을 수 있으므로 둘 다 지원하자는건데, 개인적으로는 부가적인 방법으로 상황에 따라 적용하는 것이 좋다고 생각합니다.

4. 아예 회원가입을 하지 않고 로그인 하는 방법
회원 가입대신 Facebook이나 Twitter 로그인으로 대신 하는 방법이 있습니다. 원래는 이 방법이 보안을 위해 특정 어플리케이션에서 직접 ID, Password를 입력받지 않고 사용자의 정보에 접근하기 위한 표준이었습니다. 그러나 요즘에는 개인정보가 많이 필요하지 않은 경우 페이스북, 트위터 OAuth로 사용자 인증을 하는 서비스가 많아졌습니다. 

그 전에는 통합아이디 개념의 Open ID 가 하나의 방법이었는데, 요즘에는 이 방식이 점점 줄어들고 있는 것 같습니다. 미투데이에서도 Open ID를 지원하다가, 최근 어떤 이유로 인해 Open ID를 지원하지 않고 있습니다.

5. 전화번호로 로그인(인증)하는 방법
이 경우는 웹사이트보다는 모바일에서 적합한 방식으로 보입니다. '카카오톡'에서 이 방식을 사용하고 있지요. 이 방식은 회원가입 없이도 로그인을 할 수 있다는 장점이 있습니다. 하지만 전화번호가 바뀌거나 없어질 경우에는 이 방식이 문제가 됩니다. 카카오톡의 경우 문자를 주고받는 커뮤니케이션 앱이기 때문에 전화번호가 바뀌어도 크게 이상하지는 않습니다. 하지만 다른 종류의 앱들이 전화번호로 로그인을 할경우에는 다시 친구를 맺어야 하는 문제가 생길 수 있습니다. 
또한 어떠한 연유로 두 개의 전화번호를 가지고 있는 사용자의 경우를 고려할 필요가 있습니다. 카카오톡은 한번에 한 개의 전화번호를 인증하기 때문에 두 개의 전화번호를 인식할 수 있는 방법이 없습니다.

또한 카카오톡은 전화번호 정보밖에 가져오지 않기 때문에, 다른 서비스(이를 테면 웹)에 접목시키기가 매우 어려운 실정입니다. 추가적으로 ID를 입력하게 하는것도 이 때문으로 보여집니다. 

카카오톡의 로그인(인증) 방



웹사이트 로그인, 어떤 방식으로 하는 것이 좋을까요?
저는 요즘 'E-mail + Password' 방식이 좋은 것 같다는 생각이 듭니다. 여러분들의 생각은 어떠세요?


PS. Log in vs Sign in 어떤 용어를 쓰는것이 좋을까요? 
http://legendre.tistory.com/entry/Log-in%EA%B3%BC-Sign-in




* 본 블로깅은 PXD 사내메일의 글을 일부 포함하고 있습니다. 
(글 쓰는데 많은 도움주신 이재용님, 無異님 감사합니다.)
* 좋은 자료 링크해주신 miriya님 감사합니다. 
저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

[UX] Thought2011/05/25 17:55



웹 폼 디자인의 저자 루크 로블르스키의 블로그를 우연히 발견하게 되었습니다.

구글에서 lukew 로 검색하시면 바로 나옵니다.

http://www.lukew.com/


1. 저자의 블로그 메인화면에서 배우기 

- 메인페이지에 경력을 숫자로 표현한 방식이 마음에 듭니다.

- 16년 일했고, 1242건의 글을 썼고, 2권의 책을 냈고, 132번 프레젠테이션을 했다. (좀 대단한것 같습니다.)

- 2권중에 한권은 국내 번역서로도 나온 웹 폼 디자인이란 책이고,

http://www.lukew.com/resources/web_form_design.asp

한 권은 (저에게는) 좀 생소한 Site seeing (2002)이란 책입니다.

우리 회사에서 보유하고 있는 책이라고 하는데, 기회가 될 때 한 번 읽고싶다는 생각이 들었습니다. 

http://www.lukew.com/resources/site_seeing.asp 

 

 

 

2. 저자의 책에서 배우기 - 웹 폼 디자인

이 사람이 쓴 '웹폼 디자인'에서 말했던 내용은 '결국 폼은 사라져야 된다.' 는 거였죠.

입사초기에 모 프로젝트 소강상태에서 이미지위주로 빠르게 훓어 본것 같은데,

그당시 '이 책을 먼저 접하고 프로젝트를 했으면 프로젝트에 더 좋은 영향을 끼치지 않았을까?' 라는 생각이 들었었습니다. (물론 그 당시 할 수 있는 최선의 대응을 한 것 같습니다.)



 

3. 저자의 발표 자료에서 배우기

여하간 이분이 블로그에 모바일관련해서 발표한 자료도 공유가 되어있더군요.

이것도 빠르게 훓어 봤는데 읽어보시면 도움이 될 것 같습니다.

(모바일 폼 디자인 책도 곧 나오려나요? ^^;)


Mobile first

http://www.lukew.com/presos/preso.asp?26

Mobile input

http://www.lukew.com/presos/preso.asp?23
 

 

4. 저자의 세미나 경험에서 배우기

이 분이 올해 U15에도 갔었나봅니다.

타마라 아주머니의 발표도 정리 해 놓으셨더군요.

http://www.lukew.com/ff/entry.asp?1241

데이브 그레이의 게임스토밍 발표 감상도 정리되어 있습니다.

http://www.lukew.com/ff/entry.asp?1241

게임스토밍은 최근 한글로도 번역되어 출간되었었죠.

http://koko8829.tistory.com/984

책의 내용은 제대로 안봐서 모르겠습니다. 시간 날 때 꼭 읽어보고 싶더군요. (브레인스토밍을 게임처럼?!)




*본 블로깅은 PXD 사내메일에서 발췌하였습니다. 

저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

[UX] Thought2010/12/28 19:12



이번에 UI 스터디 에서 Project mook 지를 발간했습니다. 

저도 부족하지만 'UX 디자이너를 꿈꾸는 디자인전공 후배님들을 위한 조언' 이라는 제목으로 글을 하나 쓰게 되었습니다. 글은 UI 스터디에서 발행한 Project mook 지에서 확인하실 수 있으며, 조만간 PDF 버전으로 배포한다고 하니 많은 관심 부탁드리겠습니다.

이곳에는 UX를 공부하실 분들이 보면 좋을 추천자료 링크를 모아 보았습니다.


A. 추천 사이트 및 자료

1. UX 전문가가 되려면 뭘 해야하나요? - uxjames 님의 글

2. UX / UI / 디자인 도서 목록

3. PXD 팀블로그

4. UXfactory 공지글

5. 국내 UX 블로그 리스트 - uxfactory


B. 졸업전시회 사진

1. 2010 국민대학교 시각디자인 졸업전시회

2. 2009 국민대학교 시각디자인 졸업전시회

3. 2009 홍대 디지털미디어 졸업전시회

4. 2009 홍대 시각디자인 졸업전시회

5. 2009 한경대학교 졸업전시회


C. UX 추천 입문 도서

1. 댄 새퍼의 책
UX 입문서로 추천, 이 책을 읽고 더 공부하고 싶으면 HCI 개론이나 About face 3.0 을 볼 것

더 나은 사용자경험을 위한 인터랙션 디자인
댄 새퍼 저, 이수인 역
에이콘




2. 도널드 노먼의 책
인지 심리학의 아버지, 기업 사용성 컨설팅을하는 닐슨 노먼 그룹 설립 및 활동, 도널드 노먼의 저서는 필독 

디자인과 인간심리
도널드 노먼 저, 이창우, 김영진, 박창호 역
학지사



생각있는 디자인
도널드 노먼 저, 인지공학심리연구회 역
학지사



3. 스티브 크룩의 책
웹 유저빌리티 컨설턴트인 스티브 크룩의 저서들. 비행기 안에서도 읽을 수 있을만큼 간결하고, 명쾌한 내용

상식이 통하는 웹사이트가 성공한다
스티브 크룩 저, 김지선 역
대웅출판사




사용성 평가, 이렇게 하라!
스티브 크룩 저, 이지현,이춘희 공역
위키북스




4. 앨런 쿠퍼의 책
UX 방법론인 퍼소나의 창시자 앨런 쿠퍼의 저서

정신병원에서 뛰쳐나온 디자인
앨런 쿠퍼 저, 이구형 역
안그라픽스




퍼소나로 완성하는 인터랙션 디자인 About face 3
앨런 쿠퍼, 로버트 라이만, 데이비드 크로닌 저, 김나영, 고태호, 유지선 역
에이콘출판사



저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

  1. 아, 다양한 국내 미대의 졸업전시회 사진을 찾고 있었는데 감사합니다 :)

    2011/01/06 01:22 [ ADDR : EDIT/ DEL : REPLY ]
    • 안녕하세요. 혼자만 알고 있던 정보가 누군가에게 공유되고 도움이 된다는 건 분명 좋은일이겠지요. 들려주셔서 감사합니니다.

      2011/01/09 00:23 [ ADDR : EDIT/ DEL ]
  2. 씽쏭쏭

    UX디자인에 관심이 많은 여대생입니다:) UX에 대한 호기심+열정 하나로 하나하나 알아가고자 합니다! 이제 곧 3학년이 되서,, 어떻게 공부하면 좋을지, 준비는 어떻게 해야할지 막막해서 밤잠을 못이루고 있습니다ㅜㅜ후.. 여기있는 책 중 우선 UX입문 도서 부터 읽어보고자 합니다!!!!! 꼭 다 읽고 다시 한 번 댓글을 남기러 오겠습니다!!

    2011/01/09 02:57 [ ADDR : EDIT/ DEL : REPLY ]
    • 안녕하세요. 들러주셔서 감사합니다. 여기 있는 책들은 한번씩 읽어보셔도 절대 후회하지 않으실것 같습니다. 다음 댓글 기대하겠습니다. !!

      2011/01/11 10:15 [ ADDR : EDIT/ DEL ]

[UX] Thought2010/12/06 23:43

글을 시작하며

안녕하세요오랜만에 글을 작성하게 되었습니다요즘 PXD 사람들은 Path라는 아이폰 어플리케이션에 푹 빠져 지내고 있습니다. 본 포스팅에서는 Path 어플리케이션에 대해서 알아보고 사람들이 이 서비스에 빠져드는 이유가 무엇인지 살펴보도록 하겠습니다.


그렇다면 Path 란 무엇인가 Path가 등장했는가?

'Path'는 ‘Personal Network Service’ 라고 볼 수 있습니다. 또한 Path는 현재 아이폰 앱 을 중심으로 서비스 되고 있습니다. (현재 웹에서는 이미지 확인밖에 할 수 없으며웹 혹은 안드로이드 폰으로 확산될 것으로 예상합니다.) 'Path를 설립한 사람들을 살펴보면전 페이스북 시니어 플랫폼 매니저인 Dave Morin, Dustin Mierau 공동개발자 Macster, 냅스터 공동 설립자 Shawn Fanning 등입니다. Path 가 주목받는 것은 이런 공동설립자와 투자자들에게 있습니다.' [인용]

Path가 기존의 Twitter Facebook 같은 Social Network Service와 대비되는 가장 큰 차이점은 바로 ‘Social’ 이 아니라 ‘Personal’ 이라는 점입니다. Path는 개인과 최소한의 주변 사람을 중심으로 하고 있습니다그 동안 Twitter  Facebook을 중심으로 한 Social Network Service는 개방,확장을 중심으로 급속도로 성장하고 있었습니다그와 동시에 Social Network Service에서의 사생활 노출 문제가 대두되었습니다. Facebook에서 직장상사 험담을 하다 직장을 잘린 한 여성이 단적인 예라고 볼 수 있습니다

또한 모든 사람들이 Social 한 것은 아닙니다. Social 한 커뮤케이션 니즈가 있는 사람들(불특정 다수혹은 관련 분야의 사람들과 폭넓은 소통을 하고 싶은 사람)이 있지만, Personal 한 커뮤니케이션 니즈가 있는 사람(한정된 내 친구들과의 소통을 원하는 사람)도 있습니다. Path는 바로‘Personal’에 집중을 하고 있습니다.


[path 소개 영상]


Path 어플리케이션의 특장점

1. 간단한 입력방식이미지 중심 타임라인을 사용하여 손쉽게 사용 가능하고감성을 극대화함

실시간 사진’, ‘사람’, ‘장소’, ‘행동’ - 끝 -

(정말 끝이야?)

[그림1] Path 포스팅 화면 

Path에서 글을 쓸 때 입력해야 할 정보는 이게 끝입니다심지어는 실시간 사진만 있으면사람,장소행동을 입력하지 않아도 됩니다. Path는 버전을 업그레이드하면서 미리 찍어놓았던 사진도 사용할 수 있게 바꾸었습니다이 때도 찍은 사진의 시간을 중심으로 하고 있습니다그만큼 실시간성을 강조하고 있습니다.

Path는 현장 이미지 중심으로 되어 있습니다그렇기 때문에 실시간성이 있고감성을 극대화 시키는데 일조합니다사람장소행동 정보는 입력하지 않아도 되지만사진을 꼭 찍어야 포스팅을 할 수 있습니다리스트도 이미지 중심으로 구성되어 있기 때문에, Path에서 이미지는 큰 비중을 차지하고 있습니다장소는 내 찍은 사진 뿐만 아니라모두가 찍은 사진의 장소를 풍부하게 보여줍니다행동은 내 행동 뿐만 아니라주변 사람들의 행동까지 보여주어 입력을 편하게 도와주고,감성을 극대화시키는 역할을 합니다.(나 혼자 글을 쓰는게 아니구나... 같은 느낌일것 같습니다.) 물론 처음에는 포스팅 화면에서 어떻게 입력해야 할지 당황할 수 있습니다이 점은 익숙해지면 해결될 수 있는 문제겠지만사용상의 문제도 있기 때문에 개선의 여지가 있습니다.

Path는 댓글 달기 기능이 없습니다대신에 이미지를 본 사람들을 표시해줍니다이미지를 본 사람들은 7명까지만 순서대로 보여지며더 보기 버튼을 선택하면 이후에 본 사람들을 볼 수 있습니다이미지를 본 사람들을 보여주는 것은제한적 소통의 극대화라고 볼 수 있습니다댓글달기 및 추천 기능이 없는 Path의 경우 내 이미지를 누군가 보고 있다는 느낌을 이미지를 본 사람들을 통해 받게끔 해줍니다이러한 느낌은 Path 서비스만의 독특한 감성을 이끌어냅니다.

[그림2] 댓글달기 기능이 없음 

2. 친구를 50명으로 제한하여 내 사생활도 부담없이 노출할 수 있음

또한 Path에서 등록할 수 있는 사람은 50명으로 제한됩니다. 100명만 넘어가도 한 사람 한사람에 소홀해질 수 밖에 없는 것이 Social Network Service의 현실입니다인원 제한은 그만큼 한 사람 한 사람에 집중하겠다는 의미로 생각됩니다이미지를 올릴 때 입력한 인원 (같이 찍은 사람 혹은 같이 있는 사람들은 또 나름의 의미를 가지는데남이 찍은 사진이라도 사람에 내가 포함되어있으면 내 타임라인 안에 같이 보이게 됩니다.

제한된 50명은 내 소소한 일상을 공유할 수 있는 친구의 최대 숫자로 보입니다'Robin Dumbar 교수의 이론에 따르면 개인이 사회적 관계를 유지할 수 있는 최대의 인원은 150명이라고 합니다.어떤 정보도 공유할 수 있는 관계의 사람들로그러한 관계를 만들 수 있도록 하고자하는 의도가 담겨있습니다.'  [인용]

Path는 그룹을 지원하지 않습니다이는 서비스를 최대한 간결하게 만드려는 시도인 것 같습니다. Path는 태생이 모바일 어플리케이션(정확히는 아이폰 앱에서 시작했기 때문에그룹 지원이라는 무거운 기능은 지원하고 있지 않습니다하지만 나중에 사람들이 많이 이 서비스를 이용할 경우에는 이러한 사용자의 Needs가 분명히 있을것이며 Needs를 반영할지반영하지 않을지는 앞으로 두고 볼 문제입니다.

현재 Path는 글을 올릴때에 나와 사진찍힌 사람들만 보이게 할 수 있는 옵션을 제공합니다다음과 같은 제한적 공유는 현재로써는 그룹 및 비공개를 대체할 수 있는 용도로 보여집니다.

[그림3] 그룹지원 대신 제한 공개 옵션 제공

Path는 비공개 성향이 강하기 때문에공유하고 싶은 경우 얼마든지 내 사생활도 부담없이 노출할 수 있습니다. 다른 Social Network Service에서는 불가능했던 (혹은 불안했던것들도 원한다면 얼마든지 노출이 가능합니다그렇다면 ‘Path’는 비공개 서비스일까요? 꼭 그렇지는 않습니다.현재로써는 이미지를 내 친구가 아닌 이상 볼 방법은 없습니다그러나 글을 작성할 때 이미지의 위치혹은 현재 위치 (정확히 확인된 바 는 없음을 중심으로 다른 사람들이 작성한 글이 보입니다얼핏 보면 이 서비스가 비공개서비스처럼 보이지만 엄연히 비공개라고 할 수는 없습니다하지만 Path는 이 서비스를 쓰는 사람으로 하여금 비공개 서비스처럼 느끼게 하고충분히 비공개 서비스의 경험을 제공하고 있습니다.

 

3. UI/GUI의 디테일을 통해 감성을 유발함

Path는 그 외에도 UI/GUI의 디테일을 통해 감성을 극대화하고 있습니다. UI의 디테일은 서비스 자체의 성공에 영향을 미치는 중요한 요소입니다.

3-1. 이미지 올리는 화면에서 텍스트를 탭 할 경우 버튼이 꿈틀거립니다

버튼이 꿈틀거리는 효과를 줌으로써 의외의 즐거움을 선사합니다물론 사용성에 있어서는 크게 도움이 되지는 않습니다.


[그림4] 버튼이 꿈틀거리는 효과

3-2. 이전 정보의 경우 꼬리표가 점점 길어지는 효과를 사용하고 있습니다

꼬리표는 기존 아이폰 앱에서 사용했던 타이틀 밀어내기 효과를 꼬리표로 변경한 것입니다타이틀 밀어내는 효과는 실용적이기는 하지만무미건조합니다꼬리표는 이 무미건조함을 감성적으로 풀어내었습니다.

[그림5] 꼬리표가 점점 길어짐

3-3. 로딩 후 이미지를 처리하는 센스를 발휘하고 있습니다

이미지 리스트를 로딩할 때 하단에 보여지는 Hourglass 가 사라지면(로딩이 끝나면완성도있는 그래픽 소스로 대체됩니다이런 소소한 GUI 장치가 이 서비스의 품질을 높이고 있습니다.

[그림6] 로딩 후 이미지로 변경됨

UI의 몇 가지 아쉬움

지금까지는 Path에 대한 칭찬 일색 이었습니다그러나 이번에는 Path를 사용하면서 느낀 몇 가지 UI 문제를 공유하려고 합니다.

1. 포스팅 방식이 잘 이해가 되지 않음

사진을 찍고 포스팅을 하려고 다음 화면에 진입하면 왠지 글을 써야 될 것 같은 느낌이 드는 화면에 진입합니다글을 쓰려고 회색 글씨를 탭하면 글은 안써지고버튼만 꿈틀거립니다물론 사용하다보면 어떻게 사용하는지는 감이 오실 테지만 직관적인 UI는 아니라고 생각합니다.

[
그림7] 글을 쓰려면 뭘 눌러야 되나?


2. 글 입력 과정이 불편함

글을 입력하려고 할 때 글자 입력 폼이 한 줄로 되어있어서 글을 작성하다 보면앞으로 밀려납니다이때 앞의 글자를 수정하기 위해서는 이전 글자까지 드래그를 계속 해야합니다. 아무리 이미지 중심 서비스라고 하더라도 입력이 쉽게 만들어야 하는데이점은 개선의 여지가 있습니다.

또한 이렇게 어렵게 글을 작성했다 하더라도글자를 직접 수정하는 방식을 제공하지 않습니다.글자를 수정하려고 하면기존에 썼던 글은 유지하지 않은 채로 다시 입력해야 하는 번거로운 방식을 사용하고 있습니다.


[그림8] 이전 글자 수정이 어려움

3. 댓글 기능이 없다는 점은 양날의 검

앞에서도 언급되었습니다만Path에서는 댓글 기능을 제공하고 있지 않습니다남들이 다 제공하는 댓글 기능을 빼기 위해서는 내부에서도 많은 고민을 했으리라 생각하고이 고민은 쉽지 않은 고민일 것으로 보여집니다댓글 기능 삭제는 이 서비스를 심플하게 만드는데 큰 공을 세웠습니다하지만 댓글 기능이 없음으로 인해 생기는 부작용도 있습니다그 부작용은 다름아닌 커뮤니케이션 오류입니다. Path는 일방향적인 이미지 및 글 공유로 인해 상대방이 오해할 소지가 다분합니다주관적인 글귀주관적인 이미지를 통해 일방향적으로 소통하면 상대방은 자기 스스로가 해석하고 싶은대로 해석할 수밖에 없습니다이 시점에서 댓글이 없다면 상대방이 본인의 의사를 밝히지 않거나본인 스스로가 오해의 가능성을 사전에 차단하지 않고서는 문제가 해결되지 않습니다

그런면에 있어서 Path는 의사소통의 용도로써는 어딘가 불완전해 보입니다. ‘어디에서누구랑,무엇을 했냐’ 정도의 중립적인 커뮤니케이션을 통해서도 감성을 이끌어내는데는 부족함이 없습니다다만 글이나 이미지에 감정이 실리게되면 해석의 여지에 따라서 부정적인 감정이 파생될 수 있고부정적인 감정이 누적될 우려가 있습니다. – 이 점은 Path가 아니더라도사람과 사람이 해결해야 할 문제로 보입니다다만 인터페이스에서 이런 오해를 불러일으키게 한다면분명히 개선의 여지는 있다고 생각합니다.

 

글을 정리하며

다음과 같이 Path의 등장배경, Path의 특장점 및 UI 의 아쉬움을 기술하였습니다.

본 포스팅에서 살펴본 Path의 장점을 요약하자면 다음과 같습니다.

1.   Path는 기존의 Social Network Service가 간과했던 ‘Personal’ 요소에 집중한 서비스이다.

2.   Path는 모바일 환경에 맞추어 간결하게 만든 서비스이다.

3.   Path는 감성을 극대화시키는 여러가지 방법을 사용하고 있다
(UI/ GUI 디테일이 단적인 예)

Social Network Service 도 이제 많이 등장했습니다개방공유를 중심으로 한 Twitter, Facebook, Me2day 뿐 아니라특정 계층에 중점을 둔 다음 요즘위치 기반을 중심으로 한 포스퀘어 등 이미 서비스들의 홍수로 Social Network Service 시장은 포화된 상태입니다그렇기 때문에 Social’이 화두가 되는 이 시대에 Personal Network Service로 야심차게 등장한 Path의 행보가 기대됩니다

현재 ‘Path’는 아이폰 앱스토어에서 이 주의 앱으로 홍보되고 있으며꾸준히 업데이트를 하고 있습니다앞으로 Path에 어떤 기능이 추가될지어떻게 변화할 것인지 유심히 지켜보시면 한 서비스의 흥망성쇠가 어떻게 이루어지는지도 덤으로 배우실 수 있을 것 같습니다.


저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

  1. shin

    안녕하세요 써치를 하다가 찾았는데 반가운 얼굴이네요 ㅋㅋ
    기억하실지 신혜정이라고 ㅋ 오빠랑 웹수업도 같이들었었는데..ㅋ
    저도 UI 쪽에서 일하고 있어요 ㅎㅎ 반가운마음에 글남겨요~
    블로그 멋지네요~^^ 앞으로 자주 놀러올께요

    2011/01/07 11:30 [ ADDR : EDIT/ DEL : REPLY ]
    • 기억나지. UI관련 일을 하고 있다니 의외네 ^^; 암튼 나도 반갑네.

      2011/01/09 00:27 [ ADDR : EDIT/ DEL ]

[UX] Thought2010/10/30 11:21


Family UI의 정의
'Family UI'는 자동차 업계에서 사용되는 Family Look 이라는 단어에서 인용한 것으로 한 브랜드에서 나온 모델들에 브랜드 정체성을 부여해주는 디자인 요소를 말합니다. Family Look을 적용한 디자인은 모델이 다르더라도 특정 회사의 제품이라는 것을 바로 구별해 낼 수 있어서 브랜드 정체성을 강조해주는 효과와 함께 향후 구매력에 영향을 준다고 합니다.[각주:1]


미투데이의 Family UI 비교
웹, iOS 앱, 안드로이드 앱 미투데이를 사용하면서 느꼈던 Family UI 의 차이점을 디테일한 면 위주로 비교해 보았습니다. 전반적으로 미투데이는 웹, iOS 앱, 안드로이드 앱을 일괄적으로 가져가기 위해서 애를 쓴 모습이 보입니다만, 이 글은 차이점에 대해서만 기술함을 밝혀둡니다.
(*미투데이는 친구들과 실시간으로 이야기를 나눌 수 있는 150자 마이크로 블로그입니다. 자세한 설명은 여기에서 확인하세요.) 
 
1. 아이콘
미투데이의 아이콘중에서 '찾아보는' 이라는 아이콘이 있습니다. [그림1]에서 '찾아보는'은  키워드를 이용한 검색 기능을 제공하는데, 같은 레이블의 아이콘임에도 불구하고 아이콘을 서로 다르게 표현하고 있음을 알 수 있습니다. 실제 기능을 보면 좌측에 있는 '찾아보는'은 내가 등록한 키워드 위주로 보여주는 역할을 수행합니다. 우측에 있는 '찾아보는'은 키워드를 보여주기는 하나 '검색 기능'이 있기 때문에 다른 아이콘을 쓰고 있습니다. 다른 기능이라면 아이콘만 다르게 할 것이 아니라 레이블을 변경해야 하지 않나 생각합니다.


[그림1] '찾아보는' 아이콘의 차이 (- 웹, - iOS 앱)

그 다음으로 '프로필'을 나타내는 아이콘을 보시겠습니다. [그림2]를 보시면 좌측에 있는 프로필과 우측 옵션 메뉴 키에 있는 프로필이 레이블은 같은데 아이콘을 다르게 표현하고 있습니다. 내용을 파악해보면 좌측에 있는 프로필은 엄연히 보면 프로필 설정 기능을 수행하며, 우측에 있는 프로필은 프로필 확인으로 해석할 수 있습니다. 마찬가지로 같은 레이블인데 다른 기능을 수행하므로 아이콘 뿐 아니라 레이블을 변경해야 할 것 같습니다.

[그림2] 프로필 아이콘의 차이 (- 웹, - 안드로이드 앱)

[그림3] 을 보시면 우측의 '사람찾기' 아이콘을 웃는 아이콘으로 표현하고 있습니다. 그렇다면 좌측의 아이콘도 과연 사람찾기일까요? 좌측의 아이콘은 아이콘을 변경할 수 있는 아이콘입니다. 이 상황에서는 좌측의 아이콘을 다른 아이콘으로 변경하는 것이 좋을 것 같습니다.

[그림3] 사람찾기 아이콘의 혼용 (좌,우 iOS 앱)

2. 레이블 
자 이제 레이블을 보시겠습니다. [그림4]를 보시면 좌측의 '댓글달기' 버튼과 우측의 '댓글쓰기' 레이블은 같은 기능을 수행합니다. 하지만 레이블의 차이가 있습니다. '쓰기' 버튼과 '올리기'버튼도 사실은 같은 기능을 수행합니다만 레이블의 차이가 있습니다. 물론 UI Flow 상으로는 문제가 없습니다만, 레이블을 통일시켜주는 것이 좋을것 같습니다.


[그림4] 레이블의 차이 (- 웹, - iOS 앱) 


3. 레이아웃
이번에는 레이아웃을 보시겠습니다. [그림5]번을 보시면 좌측의 글을 올린 날짜, 시간은 오른쪽 정렬로 되어있는데, 우측의 글을 올린 날짜, 시간은 왼쪽 정렬로 되어있습니다. 이때에는 두개를 통일시키는 것이 일관된 경험을 줄 수 있겠지요.
또한 날짜 시간 표현방식도 자세히 보시면 미묘하게 다름을 알 수 있습니다. 차이점이 보이시나요?

또한 아래 이미지 표현방식도 차이가 있습니다. 아이폰 앱에서는 한줄에 2개씩 보여주는데, 안드로이드 앱에서는 한 줄에 6개씩 보여줍니다.
* 추가: 아이폰에서 미투한 사람이 몇명이 기준인지는 모르겠습니다만, 많아질 경우 한줄에 5개씩 보여짐을 확인했습니다. 그래도 일관된 UI/GUI는 아니군요.

[그림5] 레이아웃의 차이 (- iOS 앱, - 안드로이드 앱)
 
4. 네비게이션
전체 네비게이션도 OS에 따라 차이가 있습니다. [그림6]을 보시면 좌측 안드로이드 앱에서는 홈(App dashboard) 화면이 있어서 어디를 들어가고 싶을때 홈(App dashboard) 화면을 거쳐서 이동해야 합니다. 하지만 iOS 앱에서는 하단 탭에 자기가 보고 싶은 카테고리 4개를 선택하여 구성할 수 있습니다. 이 차이점은 안드로이드 폰과 아이폰의 태생적인 차이점 일 수도 있겠지만, 한 회사의 서비스이니만큼 어느정도는 일관성을 지켜주는것이 좋겠다고 생각합니다.


[그림6] 네비게이션의 차이 (- iOS 앱, - 안드로이드 앱)

5. 그외에...
미투데이의 '화화'님께서도 iOS의 미투데이와 안드로이드 미투데이 앱의 사용상의 차이점을 기술 해주셨습니다. 작성한 글을 롱탭 했을때 UI가 다르다는 점을 기술하고 있습니다.



정리하며…
다음과 같이 미투데이의 웹, iOS 앱, 안드로이드 앱을 비교해 보았습니다. 
물론 미투데이의 웹 + iOS 앱 + 안드로이드 앱을 모두 사용하는 사람들은 많지 않을수도 있습니다. 그러나 한 서비스를 사용하다가 다른 서비스로 이동하더라도 동일한 경험을 제공하도록 하는것이 사용성 및 서비스의 새로운 가치 창출을 위해서는 꼭 필요하다고 생각합니다. 동일한 경험을 제공하되 각각의 플랫폼의 성격에 따라 최적화된 UI가 나오는것이 좋지 않을까요? 물론 그렇게 하는것이 쉽지는 않을 것입니다. 여러번의 시행착오와 개선이 필요하겠지요. 미투데이는 충분히 잘하고 있고, 잘하고 있기 때문에 더 아쉬운 점을 찾게 되는 것 같습니다. :)

  1. HCI 2009 학술대회 '멀티플랫폼에서 Family UI의 적용에 대한 사례연구'에서 인용 [본문으로]
저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

  1. rainriver

    사소한 것인데 아이폰 화면과 안드로이드 화면을 일관되게 배치하시는게 나을거 같습니다.
    마지막 이미지들과 앞선 이미지들이 배치가 달라 읽는 도중에 잠시 혼란스러웠습니다.

    2010/11/22 20:49 [ ADDR : EDIT/ DEL : REPLY ]
    • 댓글 감사합니다. 마지막 이미지의 위치를 변경하였습니다. 생각해보니 설명과 이미지가 매치가 잘 안되는것 같아서 이미지 아래에 표시를 추가하였습니다.

      2010/11/23 20:28 [ ADDR : EDIT/ DEL ]

[UX] Thought2010/09/28 17:18
그림1. 오사카 회전초밥 부페

4박 5일로 오사카 여행을 다녀왔습니다. 마지막날 저녁에 오사카 회전초밥을 먹었는데요. 회전초밥 부페에서의 경험을 적어볼까 합니다.

제가 회전초밥집에서 하고싶은 목표는 이랬습니다. 
1. 적당히 맛있는 초밥을 먹는다
2. 내가 원하는 초밥 위주로 먹는다
3. 배불리 먹고싶지만 배가 터질때까지는 먹고싶지않다

결론적으로 말씀드리면 저는 회전초밥 부페에 가면 안되었던것 같습니다. 차라리 일반 초밥집을 가는것이 나았을지도 모르겠습니다만, 회전초밥 부페라는 것 자체에 대한 경험으로서는 좋았던것 같네요.

이곳의 가격은 성인 남자 기준으로 1600엔입니다. 한국 돈으로 계산해보면 2만 2천원정도 됩니다. 결코 싼 가격은 아니지요. 그 외에 음료수는 공짜이고, 술이나 국같은걸 먹으려면 돈을 내야되더군요.

그림2. 오사카 회전초밥 부페 내부

그렇다면 이 곳에서 이윤을 남기기 위해 어떤 방법들을 사용하는지 제가 경험한 바를 말씀드리겠습니다.

1. 자리 배정
일단 직사각형 모양의 컨베이너 벨트위로 초밥이 빙빙 돌아가는데 직사각형의 긴 양쪽으로 손님들이 앉을 수 있습니다. 자리는 자동으로 배정을 받습니다. 이 때 하나의 트릭이 있는데요, 자리 배정시에 맨 먼저 온 손님은 가장 바깥쪽에 위치시킵니다. 그 다음에 온 손님은 그 옆자리에... 이런 식으로 늦게 오면 올수록 초밥의 초입부에 위치하게 됩니다. 초밥이 오는 초입부에 앉은 손님은 늦게 온 대신 좋은 자리를 선점하는 것이죠. 먼저 온 손님은 상대적으로 맨 처음에는 앞에 사람이 없으므로 제일 좋은자리를 차지해서 먹고싶은 음식을 맘껏 선택할 수 있지만 점점 선택할 수 있는 폭이 줄어들게 됩니다.

그렇다고 하면 가장 안쪽에 위치한 손님이 유리할까요? 유리한건 사실입니다만, 특별 메뉴들은 동일한 시간에 몇개가 겹쳐 나오는 경우가 종종 있어서 바깥쪽에 앉은 손님도 특별 메뉴를 놓치지 않겠더군요. 

2. 음식 배분
초밥 부페에서 제공되는 음식은 일반적인 초밥과 롤 메뉴 그리고 후식 메뉴의 세 종류가 있습니다. 이중 후식메뉴가 함정메뉴입니다. 빵, 도너츠, 푸딩 이런것들은 맛은 있지만 초밥을 먹으러 온 본래의 목적에서 벗어난 것들로 보입니다. 뭐 한개쯤은 먹어도 상관없겠지만 초밥을 다 먹고나서 말그대로 후식으로 먹는것이 좋을것 같습니다. 

초밥의 경우에도 한 접시에 한개만 나오는게 있고, 한 접시에 두개가 올려진 것이 있습니다. 먹고 싶은 초밥이 두개가 올려져있다면 두개를 먹지 않는이상 불가능하게 설계된 경우도 있더군요.

초밥도 여러종류가 있고 한 종류씩 먹다 보면 어떤 초밥이 맛이있는지 감이 옵니다. 이런 맛있는 초밥들은 일정 시간이 지나면 더이상 보이질 않더군요. 이렇게 되면 대충 먹고 집에 가라는 이야기겠죠. 

그렇다면 이런 의문이 생깁니다. 내가 선호하는 초밥이 일반적인 사람들이 선호하는 초밥과 다른 것일 수 있습니다. 뭐 이런경우는 내가 먹고싶은 초밥을 계속 먹다가 배불러서 못먹을때까지 먹으면 되겠지요. :)

3. 일본인들의 식사 경험 고려
일반적으로 일본인들의 식사는 간소하다고 생각합니다. 가정식을 먹어보지는 못했지만, 일본 식당에서 음식을 시켜보면 딱 필요한 만큼의 분량이 나옵니다. 반찬도 한두가지 혹은 아예 나오지 않는 경우도 있습니다.  

일본의 자판기에서는 같은 제품의 음료수가 용량이 다른데도 불구하고 가격이 같은 것들을 볼 수 있습니다. 우리나라의 경우는 그런 경우를 본적이 없었는데 말이죠. 딱 자기가 먹을 만큼의 분량의 것을 원하는 일본인들의 심리가 묻어난게 아닌가 추측해 보았습니다.

그 외에도 일본 회전 초밥집에서 재료를 위장해서 판매 한다는 이야기도 있네요. (-_-;)

그림3. 오사카 회전 초밥

그렇다면 만약에 우리나라에 회전초밥집을 차린다면 어떨까요?
당연히 우리나라 환경에 맞춘 회전 초밥집이 생겨야겠죠. 그래서 이중에 한가지 이상은 만족되어야 하지 않을까 싶습니다. 

1. 가격을 비싸게 함
2. 질을 낮춤 
3. 밥 함유량을 높임
4. 제한을 둠 - 시간을 제한함, 먹을 수 있는 개수를 제한함
5. 지리적 이점을 이용함 (가능한지는 모르겠습니다만, 바로 초밥 재료를 얻을 수 있다면 단가가 싸지겠죠)

환경적 측면을 보면 오사카는 바다와 인접한 지역이기 때문에 그래도 나름 신선한 초밥을 먹을수는 있더군요. 물론 일반적인 초밥집에 비해서 단가를 맞춰야 되니 퀄리티가 떨어질 수 밖에 없는건 당연하겠지요. 

결국 회전 초밥 부페는 이윤을 남겨야 하는 곳이고 기본적으로 '가격, 양, 질' 이 세가지 경험이 맞물려서 고객에게 총체적인 경험을 제공하는 곳이라고 생각합니다.[각주:1] 어떤것을 좀 포기해야 할지는 주인의 철학이 담겨있다고 생각합니다. 물론 회전 초밥 부페의 특성상 높은 질을 추구하기에는 다소 어려운점이 있는것은 사실입니다. 그래서 이런 자리배정이나 음식배분같은 트릭들을 사용하는 것으로 보입니다.


*두번의 일본여행 그리고 한번의 회전초밥집 체험으로 작성한 글입니다. 부족한 부분은 지적해주시면 반영하도록 하겠습니다.



  1. 물론 이런 기본적인 것들 말고도, 직원의 매너, 전체적인 분위기, 인테리어, 냄새, 소리 등 여러가지 것들에 영향을 받습니다만 여기에서는 이윤에 직접적인 영향을 끼치는 가격, 양, 질 의 측면을 기술하였습니다. [본문으로]
저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요

[UX] Thought2010/09/21 06:02

최근 아이폰4를 구매하였습니다. 그 전에는 아이팟 터치(2세대)를 사용했었는데, 아이폰4를 몇 일 동안 사용하면서 약간의 차이를 발견할 수 있었습니다. 이 차이는 아이팟 터치 (2세대)와 아이폰4의 차이라기 보다는 애플 OS 3.0과 4.0 의 차이로도 해석이 되겠지요. 기능상의 차이점은 스티브 잡스의 키노트나 다른 블로깅에서 잘 다루고 있습니다만, 저는 기능상의 차이점보다는 잘 알려지지 않은 디테일의 차이점들을 비교해보려고 합니다.

그림1. 잠금 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

메인화면은 이렇게 바뀌었습니다. 아이팟 터치에는 요일에 괄호를 치지 않았지만 아이폰4에는 요일에 괄호를 치고 있습니다.[각주:1] 이는 날짜와 요일의 구분을 용이하게 하는 것으로 생각합니다. 또한 잠금해제 아이콘도 디테일을 살렸습니다. 기존의 평평한 화살표 모양에서 그라데이션이 들어간 형태로 모양이 바뀌었습니다.

그림2. 검색 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

아이팟 터치 검색화면의 크롤바는 어색하게 최우측에 위치했습니다. 반면 아이폰4는 스크롤바의 위치가 리스트 안쪽으로 변경되었습니다.

그림3. 메일 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

메일 리스트 화면에서는 UI 가 약간 바뀌었습니다. 아이팟 터치의 메일 UI는 메일의 흐름을 파악하기 힘들었습니다. 아이폰4의 메일은 답글이 오고갔다면 답글의 히스토리를 관리해서 숫자로 보여줍니다. 리스트를 선택 하면 시작글과 해당 답글들의 목록이 보여집니다. 

그림4. 음악 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

음악 리스트 화면은 어떻게 바뀌었을까요? 다음 화면은 음악 재생시 우측 상단의 앨범 커버를 눌렀을때 나오는 화면입니다. 앨범 리스트 숫자에 점이 붙고 공간이 넓어졌습니다. 공간이 넓어진 이유는 숫자가 100단위 이상으로 생길 때를 대비한 것 같습니다.

그림5. 앨범 리스트 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

아티스트에서 앨범을 선택하면 나오는 리스트 화면도 바뀌었습니다. 아이팟 터치에서는 기본적인 리스트 구조를 가지고 있습니다. 반면 아이폰4는 앨범 UI가 좀 더 앨범의 리스트인양 바뀌었습니다.

그림6. 동영상 재생 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

동영상 재생 화면 에서는 우측 확대 축소 버튼이 삭제되었습니다. 확대 축소 버튼은 동영상 크기가 제공하는 화면보다 작을 경우 늘려서 보여주는 버튼입니다. 그러나 인코딩을 화면 사이즈에 딱 맞게 했을때는 이 버튼이 무의미합니다. 그래서 이 버튼을 제거하지 않았나 생각합니다. 화면 사이즈에 맞지 않는 동영상인 경우에도 동영상 확대 축소 버튼을 제공하지 않는지에 대해서는 확인해보지 않았기 때문에 알 수 는 없지만 아마도 제공하고 있지 않을까라고 조심스럽게 추측해봅니다.

그림7. 알람 설정 화면 비교 - 좌) 아이폰4 우) 아이팟터치 2세대

그 외에도 알람 설정 화면을 보시면 레이블의 변경, 날짜 규칙, 날짜 폰트 크기, 설명 문구의 제거 등을 보실 수 있습니다. 애플 인터페이스 가이드라인을 보시면 설명 문구에 대한 가이드라인이 있습니다만, 그것을 굳이 제거 한 이유는 설명 문구가 불필요하기 때문이라고 생각이 됩니다. 적어도 이 화면에서는 '이벤트의 자세한 내용 설정' 이라는 문구가 없어도 이해하는데는 문제가 없으니까요. 이 설정 화면 말고도 이런 방식으로 레이블, 폰트 크기, 규칙 등이 알게 모르게 개선되고 있음을 알 수 있습니다.


정리하며...

다음과 같이 아이폰 4와 아이팟 터치 2세대의 UI 화면 디테일을 비교해 보았습니다. '가이젠(改善)'은 생활의 모든 면을 계속 고쳐나간다는 일본의 생활철학에서 유래한 말입니다. 애플의 철학은 하나의 제품에서 끝나는 것이 아니라, 그것이 제대로 사용될때까지 끊임없이 디테일을 갈고 닦는것일지도 모르겠습니다. 끝은 존재하지 않습니다. 다만 끊임없는 수정과 개선이 존재할뿐입니다. 오늘도 디테일을 갈고 닦을 애플에게 한 수 배웁니다.

  1. PXD 사내메일의 '[정보디자인] 아이폰 락스크린 요일표시' 라는 글에서 인용 [본문으로]
저작자 표시 비영리
Posted by uxdragon

댓글을 달아 주세요